<template>
  <van-popup v-model:show="other.isShow" class="w-full" style="height: 100%" position="right">
    <div class="page">
      <global-header :title="`${name}报表详情`" @back="other.isShow = false" />

      <main class="page-main !overflow-hidden page">
        <div>
          <div class="row-between-center bg-white h-[40px]">
            <ActionSelect
              v-model:val="form.type"
              title="选择类型"
              :columns="statusType"
              @update="search"
            />
            <div class="text-[#E4E4E4]">|</div>
            <ActionSelect
              v-model:val="form.lottery_id"
              title="选择游戏"
              :columns="games"
              @update="search"
            />
          </div>
          <div class="h-[60px] bg-white">
            <van-search
              class="search-field"
              @search="search"
              @clear="search"
              @click-left-icon="search"
              v-model="form.issue"
              placeholder="请输入期号"
              shape="round"
            >
              <template #left-icon>
                <div class="flex items-center h-full">
                  <svg-icon name="chat-search"></svg-icon>
                </div>
              </template>
            </van-search>
          </div>
          <div class="h-[10px]"></div>
        </div>
        <div class="page-main" ref="scrollRef">
          <div class="bg-white px-[15px]">
            <scroll-list
              emptyImage
              enableRefresh
              v-model:loading="state.loading"
              v-model:refresh="state.refresh"
              :finished="state.finished"
              :length="list.length"
              @refresh="refresh"
              @load="load"
            >
              <template v-for="item in list">
                <div class="p-3 bg-white mb-2 rounded-lg shadow-sm">
                  <!-- 基础信息区块 -->
                  <div class="grid grid-cols-2 gap-2 mb-3">
                    <div class="flex flex-col">
                      <span class="text-xs text-gray-400 mb-1">用户名</span>
                      <div class="flex items-center">
                        <span class="text-base font-medium">{{ item.Name }}</span>
                        <span class="text-xs text-gray-400 ml-1">({{ item.Nickname }})</span>
                      </div>
                    </div>
                    <div class="flex flex-col items-end">
                      <span class="text-xs text-gray-400 mb-1">用户身份</span>
                      <van-tag type="primary" class="rounded-full px-2 text-xs">
                        {{ userTypeMap[item.UserType]?.text || "--" }}
                      </van-tag>
                    </div>
                  </div>

                  <!-- 操作类型和时间 -->
                  <div class="grid grid-cols-2 gap-2 mb-3">
                    <div class="flex flex-col">
                      <span class="text-xs text-gray-400 mb-1">操作类型</span>
                      <van-tag type="primary" class="rounded-full px-2">
                        {{ typeMap[item.Type]?.text || "--" }}
                      </van-tag>
                    </div>
                    <div class="flex flex-col items-end">
                      <span class="text-xs text-gray-400 mb-1">操作时间</span>
                      <span class="text-sm">{{ formatDate(item.CreatedAt) }}</span>
                    </div>
                  </div>

                  <!-- 游戏信息 -->
                  <div class="mb-3">
                    <span class="text-xs text-gray-400 mb-1 block">游戏名称</span>
                    <div class="flex items-center">
                      <svg-icon name="game" class="mr-1 text-gray-400" />
                      <span class="text-sm">{{ item.LotteryName || "暂无游戏" }}</span>
                    </div>
                  </div>

                  <!-- 金额信息 -->
                  <div class="bg-gray-50 rounded-lg p-3">
                    <div class="grid grid-cols-2 gap-4">
                      <!-- 操作金额 -->
                      <div class="flex flex-col">
                        <span class="text-xs text-gray-400 mb-2">操作金额</span>
                        <span
                          :class="[
                            'text-lg font-medium',
                            item.Coin > 0 ? 'text-[#67C23A]' : 'text-[#F56C6C]'
                          ]"
                          >{{ item.Coin > 0 ? "+" : "" }}{{ item.Coin }}</span
                        >
                      </div>

                      <!-- 余额变动 -->
                      <div class="flex flex-col">
                        <span class="text-xs text-gray-400 mb-2">积分变动</span>
                        <div class="flex items-center">
                          <span class="text-gray-600">{{ item.BalanceBefore }}</span>
                          <svg-icon
                            name="arrow-right"
                            class="mx-2 text-gray-400"
                            style="font-size: 12px"
                          />
                          <span class="text-gray-900 font-medium">{{ item.BalanceAfter }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </scroll-list>
          </div>
        </div>
      </main>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import moment from "moment";
import { useList } from "@/hooks/useList";
import { reqReportCoinRecord } from "@/api/report";
import { formatDate, getDateArray } from "@/utils/common";
import { useGameStore } from "@/store/modules/game";
import { storeToRefs } from "pinia";

interface TableItem {
  row: ReportCoinRecordMo;
}
interface Params {
  UserId: number;
  Issue?: string;
  Name?: string;
  Type?: string;
  StartDate?: string;
  EndDate?: string;
  LotteryId?: string;
}
const props = withDefaults(
  defineProps<{
    name: string | undefined;
    uid: number | undefined;
  }>(),
  {
    name: "",
    uid: undefined
  }
);

const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);

const games = computed(() => {
  return [
    { text: "全部游戏", value: "-1" },
    ...gameTotal.value.map(a => ({ text: a.Name, value: a.LotteryId }))
  ];
});

const statusType = [
  { text: "全部类型", value: "-1" },
  { text: "上分申请", value: "1" },
  { text: "下分申请", value: "2" },
  { text: "上分驳回", value: "3" },
  { text: "上分通过", value: "4" },
  { text: "下分驳回", value: "5" },
  { text: "下分通过", value: "6" },
  { text: "投注", value: "7" },
  { text: "投注盈利", value: "8" },
  { text: "红包", value: "9" },
  { text: "佣金", value: "10" },
  { text: "反水", value: "11" },
  { text: "游客体验金", value: "12" },
  { text: "订单取消", value: "13" }
];

const userTypeMap = reactive<Record<string, TextType>>({
  1: { text: "正常用户", type: "success" },
  2: { text: "游客", type: "info" },
  3: { text: "机器人", type: "warning" },
  4: { text: "房主", type: "danger" },
  5: { text: "代理", type: "primary" }
});

const typeMap = reactive<Record<string, TextType>>({
  1: { text: "上分申请", type: "primary" },
  2: { text: "下分申请", type: "primary" },
  3: { text: "上分驳回", type: "danger" },
  4: { text: "上分通过", type: "success" },
  5: { text: "下分驳回", type: "danger" },
  6: { text: "下分通过", type: "success" },
  7: { text: "投注", type: "primary" },
  8: { text: "投注盈利", type: "success" },
  9: { text: "红包", type: "danger" },
  10: { text: "佣金", type: "info" },
  11: { text: "反水", type: "info" },
  12: { text: "游客体验金", type: "info" },
  13: { text: "订单取消", type: "danger" }
});
const emit = defineEmits(["update"]);

const other = reactive({
  updating: false,
  isShow: false
});
const form = reactive({
  lottery_id: "-1",
  issue: "",
  name: "",
  type: "-1",
  date: getDateArray()["today"]
});
const getParams = () => {
  const params: Params = {
    UserId: props.uid as number
  };
  if (form.issue) {
    params.Issue = form.issue;
  }
  if (form.name) {
    params.Name = form.name;
  }
  if (form.type && form.type != "-1") {
    params.Type = form.type;
  }
  if (form.date) {
    params.StartDate = moment(form.date[0]).format("YYYY-MM-DD 00:00:00");
    params.EndDate = moment(form.date[1]).format("YYYY-MM-DD 23:59:59");
  }
  if (form.lottery_id && form.lottery_id != "-1") {
    params.LotteryId = form.lottery_id;
  }
  return params;
};
const { state, list, getData, search, refresh, load } = useList<ReportCoinRecordMo, Params>(
  reqReportCoinRecord,
  getParams
);

const closed = () => {
  other.isShow = false;
  form.lottery_id = "-1";
  form.issue = "";
  form.name = "";
  form.type = "-1";
  form.date = getDateArray()["today"];
};

const open = () => {
  if (!props.uid) return;
  other.isShow = true;
  getData();
};

// 重置
const handleRefresh = () => {
  form.lottery_id = "-1";
  form.issue = "";
  form.name = "";
  form.type = "-1";
  form.date = getDateArray()["today"];
  search();
};

defineExpose({
  open
});
</script>
